<template>
  <view class="bjys">
    <div class="videotype">
      <div class="search3">
        <div class="input">
          <navigator url="../search">
            <div class="input__text">
              搜你想搜看你想看
            </div>
          </navigator>
        </div>
        <div class="right">
          <image src="@/static/img/collect_btn_active.png" @click="collect"></image>
          <image src="@/static/img/fx.png" @click="share"></image>
        </div>
      </div>
    </div>
    <view class="flex_item">
      <view :class="num4 == index ? 'bor-ra':'bor-ra2'" @click="data3Btn(index)" v-for="(item,index) in Data3"
        :key="index">
        {{ item }}
        <view class="hengheng" v-if="num4 == index">

        </view>
      </view>
    </view>
    <!-- 视频标签 -->
    <view class="filter-filt" v-if="num4 == 0">
      <scroll-view scroll-x class="nav" scroll-with-animation>
        <view class="cu-item" :class="num == index ? 'bor-ra':'bor-ra2'" @click="tabSelect(item,index)" :data-id="index"
          v-for="(item,index) in filterList" :key="index">
          {{item.name}}
        </view>
      </scroll-view>
      <view class="flex_ite">
        <view :class="num2 == index ? 'bor-ra':'bor-ra2'" @click="dataBtn(index)" v-for="(item,index) in Data"
          :key="index">
          {{ item }}
        </view>
      </view>
      <view class="flex_ite">
        <view :class="num1 == index ? 'bor-ra':'bor-ra2'" @click="data2Btn(index)" v-for="(item,index) in Data2"
          :key="index">
          {{ item }}
        </view>
      </view>
    </view>

    <!-- 演员标签 -->
    <view class="filter-filt" v-if="num4 == 1">
      <scroll-view scroll-x class="nav" scroll-with-animation>
        <view class="cu-item" :class="num5 == index ? 'bor-ra':'bor-ra2'" @click="yinSelect(item,index)"
          :data-id="index" v-for="(item,index) in yinList" :key="index">
          {{item}}
        </view>
      </scroll-view>
      <view class="flex_ite">
        <view :class="num6 == index ? 'bor-ra':'bor-ra2'" @click="data6Btn(index)" v-for="(item,index) in Data6"
          :key="index">
          {{ item }}
        </view>
      </view>
    </view>
    <view class="indexbox" v-if="num4 ==0">
      <!-- <view class="image11" v-if="vidoList && item.vod_url" v-for="(item ,index) in vidoList" :key="index"
        @click="jumpBtn2(item.vod_url)">
        <image :src="item.vod_pic" mode="widthFix"></image>
      </view> -->

      <view :class="filterList[num].css == 'col-style-2'? 'indexbox_left':'indexbox_left2'"
        v-for="(item,index) in vidoList" :key="index">
        <view class="image11" @click="jumpBtn2(item.vod_url)" :style="{'backgroundImage':'url('+item.vod_pic+')' }"
          v-if="vidoList && item.vod_url">

        </view>
        <view v-else @click="playBtn(item)">
          <view class="VIP_img" v-if="item.vod_vip == 2">
            VIP
          </view>
          <view class="inox_left_img" v-if="item.vod_pic" :style="{'backgroundImage':'url('+item.vod_pic+')' }"></view>
          <view class="inox_left_img" v-else :style="{'backgroundImage':'url('+gifUrl+')' }">
          </view>
          <image class="inox_left_icon" src="@/static/img/collect_btn.png" v-if="scztList.indexOf(item.vod_id) == -1"
            @click.stop="sczt(item.vod_id)" mode="widthFix"></image>
          <image class="inox_left_icon" src="@/static/img/collect_btn_active.png" v-else @click.stop="sczt(item.vod_id)"
            mode="widthFix"></image>
          <view class="inl_content">{{ item.vod_name }}</view>
        </view>

      </view>
    </view>
    <!-- 分类标签 -->
    <view class="filter-filt" v-if="num4 == 2">

      <view class="flex_ite">
        <view :class="num7 == index ? 'bor-ra':'bor-ra2'" @click="data7Btn(index)" v-for="(item,index) in Data7"
          :key="index">
          {{ item }}
        </view>
      </view>

    </view>
    <!-- 标签标签 -->
    <view class="filter-filt" v-if="num4 == 3">

      <view class="flex_ite">
        <view :class="num8 == index ? 'bor-ra':'bor-ra2'" @click="data8Btn(index)" v-for="(item,index) in Data8"
          :key="index">
          {{ item }}
        </view>
      </view>

    </view>
    <view :class="num4 == 1 ?'numbox_flex2':'numbox_flex'" v-if="num4 == 2 || num4 == 3 || num4 == 1">
      <view class="fl_item" v-for="(item,index) in vodtype" :key="index">
        <view class="fl_item_img" :style="{'backgroundImage':'url('+item.pic+')' }" @click="jumpBtn(item.id)"></view>
        <!-- <image class="fl_item_img" :src="item.pic" mode="widthFix"></image> -->
        <p>{{ item.name }}</p>
      </view>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        filterList: [],
        tag: '', // 一级
        num: 0,
        gifUrl: 'https://www.tmtv777.com/img/logo.1cecf4f4.gif',
        num1: 0,
        num5: 0,
        num6: 0,
        num7: 0,
        num8: 0,
        type: 0,
        num4: 0,
        num2: 0,
        yingwen: '全部',
        vodtype: [], // 
        yinList: ['全部', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
          'T',
          'U', 'V', 'W', 'X', 'Y', 'Z'
        ],
        vidoList: [],
        Data: ['全部权限', '免费视频', 'VIP专属'],
        Data2: ['最新上架', '最多播放', '最早上架'],
        Data3: ['视频', '演员', '分类', '标签'],
        Data6: ['按推荐', '按热门'],
        Data7: ['按推荐', '按热门'],
        Data8: ['按推荐', '按热门'],
        scztList: [],
        page: 1
      }
    },
    onReachBottom() {
      if (this.num4 == 0) {
        uni.showLoading({
          title: "加载中"
        })
        this.page++;
        this.$http.tab3({
          p: this.page,
          t: this.type,
          v: this.num2,
          s: this.num1
        }).then(res => {
          if (res.code == 200) {
            if (res.data.tab3list == null) {
              this.$toast('没有更多了~');
              return;
            }
            this.vidoList = this.vidoList.concat(res.data.tab3list);
            uni.hideLoading();
          }
        })
      }
    },
    onLoad(opt) {
      this.num4 = uni.getStorageSync('num') || 0;
      if (this.num4 == 3) {
        uni.showLoading({
          title: '加载中'
        })
        this.$http.filtertype({
          p: 1,
          l: this.tag,
          s: 0
        }).then(res => {
          if (res.code == 200) {
            this.vodtype = res.data.vodtype;
            uni.hideLoading();
            uni.setStorageSync('num', '');
          }
        })
      }
      this.scztList = uni.getStorageSync('vod_id');
      this.$http.filterIn().then(res => {
        if (res.code == 200) {
          this.filterList = res.data.type;
          this.type = res.data.type[0].type;
        }
      })
      this.tab3List();
    },
    methods: {
      jumpBtn2(url) {
        plus.runtime.openURL(url, function() {
          console.log(res, 123)
        })
      },
      /**
       * 收藏
       */
      sczt(scid) {
        this.scztList = uni.getStorageSync('vod_id') || [];
        this.$http.sczt({
          scid: scid,
          token: uni.getStorageSync('phone')
        }).then(res => {
          if (res.code == 200) {
            if (res.message == '收藏成功') {
              this.$toast(res.message)
              this.scztList.push(scid);
              uni.setStorageSync('vod_id', this.scztList)
            } else if (res.message == '取消收藏') {
              this.scztList = uni.getStorageSync('vod_id') || [];
              this.scztList.slice().reverse().forEach((item, index, arr1) => {
                if (item === scid) {
                  this.scztList.splice(arr1.length - 1 - index, 1);
                }
              });
              uni.setStorageSync('vod_id', this.scztList)
              this.$toast(res.message)
            }
          }
        }).catch(err => {
          let token = uni.getStorageSync('token') || 'none';
          if (token == 'none') {
            uni.showModal({
              title: '提示',
              content: "请登录！",
              success: function(res) {
                if (res.confirm) {
                  uni.reLaunch({
                    url: '/pages/login/index'
                  });
                }
              }
            })
          }
        })
      },
      share() {
        uni.navigateTo({
          url: '../share'
        })
      },
      collect() {
        uni.navigateTo({
          url: '../collect'
        })
      },
      playBtn(item) {
        uni.navigateTo({
          url: `../player?playid=${item.vod_id}`
        })
      },
      jumpBtn(index) {
        if (this.num4 == 3) {
          uni.navigateTo({
            url: `/pages/tags/index?id=${index}&tag=tag`
          })
        } else if (this.num4 == 2) {
          uni.navigateTo({
            url: `/pages/tags/index?id=${index}&tag=type`
          })
        } else if (this.num4 == 1) {
          uni.navigateTo({
            url: `/pages/tags/index?id=${index}&tag=star`
          })
        }
      },
      /**
       * 获取分类和标签
       */
      filtertype(num) {
        uni.showLoading({
          title: '加载中'
        })
        this.$http.filtertype({
          p: 1,
          l: this.tag,
          s: num
        }).then(res => {
          if (res.code == 200) {
            this.vodtype = res.data.vodtype;
            uni.hideLoading()
          }
        })
      },
      filtertype2(num, yin) {
        this.$http.filtertype({
          p: 1,
          l: this.tag,
          s: num,
          z: yin
        }).then(res => {
          if (res.code == 200) {
            this.vodtype = res.data.vodtype;
          }
        })
      },
      /**
       * 获取列表数据
       */
      tab3List() {
        uni.showLoading({
          title: '加载中'
        })
        this.$http.tab3({
          p: this.page,
          t: this.type,
          v: this.num2,
          s: this.num1
        }).then(res => {
          if (res.code == 200) {
            this.vidoList = res.data.tab3list;
            uni.hideLoading();
          }
        })
      },
      yinSelect(item, index) {
        this.yingwen = item;
        this.num5 = index;
        this.filtertype2(this.num6, this.yingwen)
      },
      tabSelect(item, index) {
        this.type = item.type;
        this.num = index;
        this.page = 1;
        this.tab3List();
      },
      dataBtn(index) {
        this.num2 = index;
        this.page = 1;
        this.tab3List();
      },
      data2Btn(index) {
        this.num1 = index;
        this.page = 1;
        this.tab3List();
      },
      /**
       * 一级标题
       */
      data3Btn(index) {
        if (index == 1) {
          this.tag = 'star';
          this.filtertype2(this.num6, this.yingwen);
        } else if (index == 2) {
          this.tag = 'type';
          this.filtertype(this.num7);
        } else if (index == 3) {
          this.tag = 'tag';
          this.filtertype(this.num8);
        }
        this.num4 = index;
      },

      /**
       * 演员
       */
      data6Btn(index) {
        this.num6 = index;
        this.filtertype2(this.num6, this.yingwen);
      },
      data7Btn(index) {
        this.num7 = index;
        this.filtertype(this.num7);
      },
      data8Btn(index) {
        this.num8 = index;
        this.filtertype(this.num8);
      }
    }
  }
</script>

<style lang="less">
  page {
    background-color: #f9faff;
  }

  .scrl_mop {
    margin-top: 60rpx;
    color: #FFFFFF;

  }

  .filter-filt {
    margin: 35rpx auto;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    width: 94%;
    background: #fff;
    border-radius: 20rpx;

    .bor-ra {
      color: #7e8993;
      border-radius: 30rpx;
      height: 58rpx;
      line-height: 58rpx;
      border: 1rpx solid #7e8993;
    }

    .bor-ra2 {
      height: 58rpx;
      line-height: 58rpx;
      color: #7e8993;
    }

    .flex_ite {
      margin-top: 10rpx;
      display: flex;
      justify-content: flex-start;
      padding-left: 10rpx;

      .bor-ra {
        padding: 0 20rpx;
        color: #7e8993;
        border-radius: 30rpx;
        height: 58rpx;
        line-height: 58rpx;
        border: 1rpx solid #7e8993;
      }

      .bor-ra2 {
        padding: 0 20rpx;
        height: 58rpx;
        line-height: 58rpx;
        color: #7e8993;
      }
    }


  }

  .numbox_flex {
    margin: 20rpx auto;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .fl_item {
      margin-left: 13rpx;
      margin-bottom: 20rpx;
      position: relative;
      padding-bottom: 45rpx;
      width: 235rpx;
      min-height: 400rpx;

      .fl_item_img {
        width: 100%;
        height: 364rpx !important;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50%;
        border-radius: 20rpx;
        box-shadow: 0 4px 10px rgb(51, 51, 51, 0.37);
      }

      p {
        position: absolute;
        bottom: 0;
      }
    }
  }

  .numbox_flex2 {
    margin: 20rpx auto;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .fl_item {
      margin-left: 13rpx;
      margin-bottom: 20rpx;
      position: relative;
      padding-bottom: 45rpx;
      width: 150rpx;
      min-height: 150rpx;

      .fl_item_img {
        width: 100%;
        height: 150rpx !important;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50%;
        border-radius: 50%;
        box-shadow: 0 4px 10px rgb(51, 51, 51, 0.37);
      }

      p {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
      }
    }
  }

  .indexbox {
    margin-top: 30rpx;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;

    // margin-bottom: 60rpx;
    .indexbox_left2 {
      position: relative;
      margin-left: 15rpx;
      margin-bottom: 15rpx;
      width: 30%;
      height: 343rpx;
      border-radius: 20rpx;
      overflow: hidden;

      .inl_content {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        bottom: 0rpx;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 290rpx;
        background-repeat: no-repeat;
        box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
        background-size: cover;
        background-position: 50%;
        border-radius: 20rpx;
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        left: 155rpx;
        width: 70rpx;
        height: 70rpx;
      }

      .videoBox-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 60rpx;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
        color: #fff;
        font-size: 12rpx;
        border-bottom-right-radius: 13rpx;
        border-bottom-left-radius: 10rpx;

        .vib_left {
          width: 20%;
          display: flex;
          align-items: center;

          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .vib_right {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;

          span {
            margin-left: 10rpx;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 5rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }

    .indexbox_left {
      position: relative;
      margin-top: 15rpx;
      margin-left: 15rpx;
      width: 355rpx;
      height: 305rpx;
      border-radius: 20rpx 20rpx 0 0;
      // background-color: #ddd;

      .inl_content {
        position: absolute;
        width: 98%;
        bottom: 0rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 355rpx;
        height: 255rpx;
        background-repeat: no-repeat;
        background-size: cover;
        // background-position: 100%; 
        box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
        border-radius: 20rpx;
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        right: 15rpx;
        width: 70rpx;
        height: 70rpx;
      }

      .videoBox-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 60rpx;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
        color: #fff;
        font-size: 12rpx;
        border-bottom-right-radius: 13rpx;
        border-bottom-left-radius: 10rpx;

        .vib_left {
          width: 20%;
          display: flex;
          align-items: center;

          span {
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .vib_right {
          width: 80%;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          span {
            margin-right: 20rpx;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-right: 0;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }

  .flex_item {
    margin-top: 40rpx;
    display: flex;
    justify-content: flex-start;
    padding-left: 30rpx;

    .bor-ra {
      position: relative;
      display: flex;
      height: 56rpx;
      justify-content: center;
      margin-right: 30rpx;
      transform: scale(1.2);
      color: #fff;
    }

    .bor-ra2 {
      position: relative;
      display: flex;
      height: 56rpx;
      justify-content: center;
      margin-right: 30rpx;
      font-size: 28rpx;
      color: #fff;
    }

    .hengheng {
      position: absolute;
      bottom: 0;
      width: 20rpx;
      height: 6rpx;
      border-radius: 3rpx;
      background-color: #FFFFFF;
    }
  }

  .right {
    image {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .indexbox_left {
    overflow: hidden;

    .VIP_img {
      position: absolute;
      top: 0;
      padding: 5rpx 10rpx;
      left: 0;
      z-index: 9;
      border-radius: 0rpx 0 20rpx 0;
      color: #FFFFFF;
      background: linear-gradient(90deg, #fb4376, #e6d44f);
    }
  }

  .image11 {
    // margin-bottom: 30rpx;
    width: 100%;
    height: 100%;
    // text-align: center;
    border-radius: 20rpx;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
  }
</style>
